import tpl from './index.tpl';
import './index.scss';

import { Logo } from './logo';
import { Nav } from './nav';
import { Search } from './search';

import tools from '../../utils/tools'

class Header {
    constructor(el, fieldDatas, phoneDatas) {
        this.name = 'header';
        this.$el = el;

        this.fieldDatas = fieldDatas;
        this.phoneDatas = phoneDatas;

        this.logo = new Logo();
        this.nav = new Nav();
        this.search = new Search();

    }

    async init() {
        await this.render();
        this.bindEvent();
    }

    async render() {
        await this.$el.append(tools.tplReplace(tpl(), {
            logo: this.logo.tpl(),
            nav: this.nav.tpl(this.fieldDatas),
            search: this.search.tpl()
        }));
    }

    bindEvent() {
        const $nav = $('.J_nav'),
              $searchBtn = $('.J_searchBtn');
        //$.proxy()是JQ的改变内部函数this指向的一个方法
        //jQuery的事件函数，(事件类型，代理哪个元素，传入的参数，自己定义的处理函数)
        $nav.on('mouseenter', '.nav-item', { phoneDatas: this.phoneDatas, oNav: this.nav }, this.nav.navMouseIn);
        $searchBtn.on('click', this.search.searchPhone);
    }
}

export { Header };